<template>
  <el-form :inline="true" :model="studentSearchQuery" class="demo-form-inline">
    <el-form-item label="学生姓名">
      <el-input v-model="studentSearchQuery.name" placeholder="请输入学生姓名" clearable />
    </el-form-item>
    <el-form-item label="年龄区间左">
      <el-input v-model="studentSearchQuery.startAge" placeholder="请输入最小年龄" clearable />
    </el-form-item>    
    <el-form-item label="年龄区间右">
      <el-input v-model="studentSearchQuery.endAge" placeholder="请输入最大年龄" clearable />
    </el-form-item>    
    <el-form-item label="学生手机号">
      <el-input v-model="studentSearchQuery.phone" placeholder="请输入学生手机号" clearable />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSarch">搜 索</el-button>
      <el-button type="primary" plain @click="onReset">重 置</el-button>
    </el-form-item>
  </el-form>
  <br/><br/>

  <el-button type="primary" @click="addStudent">增加学生信息</el-button>
  <el-button type="danger" @click="batchDelStudent">批量删除</el-button>
  <br/><br/>

  <el-table
      ref="multipleTableRef"
      :data="studentList"
      style="width: 100%"
      @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column type="index" label="序号" width="60" />
    <el-table-column property="name" label="姓名" width="200"/>
    <el-table-column property="age" label="年龄" />
    <el-table-column property="phone" label="手机号" />
    <el-table-column label="操作" width="230">
      <template #default="scope"><!--vue插槽-->
        <el-button type="success" @click="edit(scope.row.id)">编辑</el-button>
        <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <br/>

  <el-pagination background
                 layout="prev, pager, next"
                 :page-size="pageSize"
                 :total="totalRow"
                 @prev-click="page"
                 @next-click="page"
                 @current-change="page"/>

</template>

<script>
import {doPost, doGet} from "@/http/axios-http";
import {message, messageConfirm} from "@/http/message";

export default {

  //注入reload
  inject : ['reload'],

  data() {
    return {
      //学生搜索条件对象，初始值是空
      studentSearchQuery : {},
      //学生列表list对象数据，初始值是空
      studentList : [{}],
      //每页显示多少条
      pageSize : 0,
      //总共有多少条
      totalRow : 0,
      //勾选了哪些学生id，默认值是空
      studentIdArray : []
    }
  },

  //页面渲染时触发该钩子函数
  mounted() {
    // this.loadAllUser();
    this.getData();
  },

  methods : {
    //查询学生列表数据
    getData() {
      doGet('/student/stu_info/getStudentByPage',this.studentSearchQuery).then(resp => {
        console.log(resp)
        if (resp.data.code === 200) {
          this.studentList = resp.data.data.dataList;
          this.pageSize = resp.data.data.pageSize;
          this.totalRow = resp.data.data.totalRow;
        }
      })
    },

    //搜索
    onSarch() {
      this.getData();
    },
    //重置
    onReset() {
      this.studentSearchQuery = {};
    },

    //录入市场学生
    addStudent() {
      //跳转路由
      this.$router.push({path : "/teacherDash/student_info/add"});
      //window.location.href = "/dashboard/student/add";
    },


    //编辑市场学生
    edit(id) {
      console.log(id);
      this.$router.push({path : "/teacherDash/student_info/edit/" + id});
    },

    //删除学生
    del(id) {
      //首先提示用户是否确定要删除
      messageConfirm("您是否确定要删除此数据？").then(() => { //当你点“确定”，执行该函
        doPost("/student/stu_info/del/" + id, {}).then(resp => {
          if (resp.data.code === 200) {
            //删除成功
            message("删除成功", "success");
            //刷新页面
            this.reload();
          } else {
            message("删除失败，原因：" + resp.data.msg, "error");
          }
        })
      }).catch(error => { //当你点“取消”，执行该函数
        message("删除错误:"+error, "warning");
        
      });
    },

    //批量删除学生
    batchDelStudent() {
      //用户没有选数据，要提示一下
      if (this.studentIdArray.length <= 0) {
        message("请选择要删除的数据", "warning");
        return;
      }
      //1、拿到选择的id
      let ids = this.studentIdArray.join(",");  //得到：ids = "1,2,5,7,10,12"
      //2、把这些id的数据删除
      messageConfirm("您是否确定要删除这些数据？").then(() => { //当你点“确定”，执行该函
        doPost("/student/stu_info/batchDel/" + ids, {}).then(resp => {
          if (resp.data.code === 200) {
            //删除成功
            message("删除成功", "success");
            //刷新页面
            this.reload();
          } else {
            //删除失败
            message("删除失败，原因：" + resp.data.msg, "error");
          }
        })
      }).catch(() => { //当你点“取消”，执行该函数
        message("删除已取消", "warning");
      });
    },

    //勾选或取消复选框时触发该函数
    handleSelectionChange(selection) {
      //勾选或取消复选框时，先把用户id的数组清空
      this.studentIdArray = [];
      selection.forEach( (student) => {
        this.studentIdArray.push(student.id);
      });
    }
  }
}

</script>

<style>

</style>
